<template>
  <div class="extra-tip">
    <div class="title" @click.stop="handlerClick">{{ txt }}</div>
    <div class="extra-div" v-show="expanded" v-html="extraHtml"></div>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineExpose, ref } from 'vue'

const props = defineProps({
  // 标题
  txt: {
    type: String,
    required: true
  },
  // 额外的html
  extraHtml: {
    type: String,
  }
})
const emit = defineEmits(['click'])


const expanded = ref(false)
const expandToggle = () => {
  if (props.extraHtml) {
    expanded.value = !expanded.value
  }
}

const handlerClick = () => {
  expandToggle()
  emit('click')
}

// 使用 defineExpose 暴露方法
defineExpose({
  expandToggle
})
</script>

<style scoped>
.extra-tip {
  color: #555;
  font-size: 12px;
}
</style>